<!DOCTYPE html>
<html>
<head>
      <title>swoole chat room</title>
      <meta charset="UTF-8">
      <script type="text/javascript">
        var room = 'room1';
          if(window.WebSocket){
              var webSocket = new WebSocket("ws://193.112.30.236:9501");
              webSocket.onopen = function (event) {
                  //webSocket.send("Hello,WebSocket!"); 
              };
              webSocket.onmessage = function (event) {
                var content = document.getElementById(room);
                content.innerHTML = content.innerHTML.concat('<p style="margin-left:20px;height:20px;line-height:20px;">'+event.data+'</p>');
              }
              
              var sendMessage = function(){
                  var data = {};
                  data.type = 2;
                  data.msg = document.getElementById('message').value;
                  json = JSON.stringify(data);
                  webSocket.send(json);
              }
              var chose = function(int){
                  var data = {};
                  data.type = 1;
                  data.msg = int;
                  room = 'room'+int;
                  json = JSON.stringify(data);
                  webSocket.send(json);
              }
          }else{
              console.log("您的浏览器不支持WebSocket");
          }
      </script>
</head>
<body>
    <div style="width:903px;margin:0 auto;border:1px solid #ccc;">
        <div id="room1" style="overflow-y:auto;height:300px;width: 300px;float: left;border-right: 1px solid #000 "></div>
        <div id="room2" style="overflow-y:auto;height:300px;width: 300px;float: left;border-right: 1px solid #000"></div>
        <div id="room3" style="overflow-y:auto;height:300px;width: 300px;float: left"></div>
        <hr/>
        <button onclick="chose(1)" style="height:28px;width:80px;">选择房间1</button>
        <button onclick="chose(2)" style="height:28px;width:80px;">选择房间2</button>
        <button onclick="chose(3)" style="height:28px;width:80px;">选择房间3</button>
        <div style="height:40px">
            <input type="text" id="message" style="margin-left:10px;height:25px;width:450px;">
            <button onclick="sendMessage()" style="height:28px;width:75px;">发送</button>
        </div>
    </div>
</body>
</html>